{{extend './layout.htm'}}

{{block 'css'}}
{{if ~special_modules.indexOf('markdown')}}
<link href="/static/common/highlight/default.min.css" rel="stylesheet">
{{/if}}
{{if ~special_modules.indexOf('map')}}
<link href="/static/common/bmap/1.0.1.css" rel="stylesheet">
{{/if}}
{{if special.page_width}}
<style>
    @media screen and (min-width: 961px) {
        .container {
            width: {
                    {
                    special.page_width
                }
            }

            ;
        }
    }
</style>
{{/if}}
{{/block}}

{{block 'header'}}
<div class="container jumbotron">
    <h1 class="text-2xl">{{special.title}}</h1>
    <p class="text-xl">{{special.description}}</p>
</div>
{{/block}}

{{block 'content'}}
<div class="container max-w-screen-xl mx-auto mt-4 flex-grow px-5 lg:px-0" id="content">
    <div class="lg:mx-5">
        <div class="grid grid-cols-3 gap-4">
            <div class="col-span-3  {{special.aside?'lg:col-span-2':'lg:col-span-3'}} dark:text-white">
                <div class="bg-white dark:bg-warmgray-900 p-5 my-4"> 
                    {{each special_item sp_item}} 
                    {{if sp_item.type == 'list'}}
                    {{if !sp_item.data.style}}
                    <div class="list">
                        {{each sp_item.data.list item}}
                        <dl class="list-item {{item.thumb && 'thumb'}}">
                            <dt>
                                <h3 class="title"><a href="{{url(':article', {id: item.id})}}">{{item.title}}</a></h3>
                            </dt>
                            <dd>
                                {{@item.thumb && '<a class="image" href="'+url(':article', {id: item.id})+'"><img src="'+item.thumb+'" /></a>'}}
                                {{item.description}}
                            </dd>
                            <ul>
                                <li>时间: {{item.add_time | dateFormat 'YYYY-mm-dd'}}</li>
                                <li>浏览: {{item.click}}</li>
                                <li>关键词: {{item.keywords}}</li>
                            </ul>
                        </dl>
                        {{/each}}
                    </div>
                    {{else if ~['imagetitle', 'image', 'title'].indexOf(sp_item.data.style)}}
                    <div class="{{sp_item.data.style == 'title' ? 'list-title' : 'list-image'}}">
                        {{each sp_item.data.list item}}
                        <dl class="list-item">
                            {{if ~['imagetitle', 'image'].indexOf(sp_item.data.style)}}
                            <dd>{{@item.thumb && '<a class="image" href="'+url(':article', {id: item.id})+'"><img  src="'+item.thumb+'" /></a>'}}</dd>
                            {{/if}}
                            {{if ~['imagetitle', 'title'].indexOf(sp_item.data.style)}}
                            <dt>
                                <h3 class="title"><a href="{{url(':article', {id: item.id})}}">{{item.title}}</a></h3>
                            </dt>
                            {{/if}}
                        </dl>
                        {{/each}}
                    </div>
                    {{/if}}
                    {{else if sp_item.type == 'markdown' || sp_item.type == 'html'}}
                    <article class="content">
                        {{@sp_item.data.content}}
                    </article>
                    {{else if sp_item.type == 'map'}}
                    <div class="map map-{{sp_item.id}}" style="height: {{sp_item.data.height || '300px'}}">
                        <el-bmap :zoom="parseFloat(mapData.zoom)"
                            :center="mapData.center ? [...mapData.center.split(',')] : ['116.403424', '39.924079']"
                            :map-type="mapData.map_type == 'earth' ? 'B_EARTH_MAP' : 'B_NORMAL_MAP'"
                            :heading="parseFloat(mapData.rotate) || 0" @zoomend="zoomEnd">
                            <template v-for="(item, index) in mapData.list" :key="index">
                                <template v-if="item.point_type == 'point'" v-for="(point, index) in item.points">
                                    <el-bmap-marker :position="point.split(',')"></el-bmap-marker>
                                </template>
                                <template v-else-if="item.point_type == 'line'">
                                    <el-bmap-polyline :path="item.points.map(p => p.split(','))"
                                        :stroke-color="color(item.line_color)"
                                        :stroke-opacity="opacity(item.line_color)"
                                        :stroke-weight="parseInt(item.line_width || 1)"
                                        :stroke-style="item.line_type || 'solid'"></el-bmap-polyline>
                                </template>
                                <template v-else-if="item.point_type == 'area'">
                                    <el-bmap-polygon :path="item.points.map(p => p.split(','))"
                                        :stroke-color="color(item.line_color)"
                                        :stroke-opacity="opacity(item.line_color)"
                                        :stroke-weight="parseInt(item.line_width || 1)"
                                        :stroke-style="item.line_type || 'solid'" :fill-color="color(item.fill_color)"
                                        :fill-opacity="opacity(item.fill_color)"></el-bmap-polygon>
                                </template>

                                <el-bmap-label v-if="item.text && item.text_point"
                                    :position="point(item.text_point || item.points[0])" :is-custom="true">
                                    <div :style="textStyle(item)">{$text(item.text)}</div>
                                </el-bmap-label>
                            </template>
                        </el-bmap>
                    </div>
                    {{/if}} 
                    {{/each}}
                </div>
                
            </div>
            {{if special.aside}}{{include './aside.htm'}}{{/if}}
        </div>
    </div>
</div>
{{/block}}

{{block 'js'}}
{{if ~special_modules.indexOf('markdown')}}
<script src="/static/common/highlight/highlight.min.js"></script>
<script>
    hljs.highlightAll();
    // 文章图片点击查看
    $('article.content>p>img').each(function () {
        var that = $(this);
        if (that.attr('alt')) {
            that.attr('title', that.attr('alt'));
        }
        that.click(function () {
            window.open(that.attr('src'));
        });
    });
</script>
{{/if}}
{{if ~special_modules.indexOf('map')}}
<script src="/static/common/vue/3.2.37.min.js"></script>
<script src="/static/common/bmap/1.0.1.js"></script>
<script>const map_ak = '{{map_ak}}'; var map_data = {{@map_data}};</script>
<script src="/static/map.js"></script>
{{/if}}
{{/block}}